<%@ include file="/common/taglibs.jsp"%>
<head>
    <title><fmt:message key="penalizacionbonificacionList.title"/></title>
    <meta name="heading" content="<fmt:message key='penalizacionbonificacionList.heading'/>"/>    
</head>

<form:form id="penalizacionbonificacionList">
<input type="hidden" id="date_format" value="${fecha_documento_date_format}"/>
<c:set var="buttons">
    <input type="button" class="button" 
        onclick="location.href='<c:url value="/penalizacionbonificacion/penalizacionbonificacionform.html?method=Add&from=list"/>'"
        value="<fmt:message key="button.add"/>"/>
        
    <input type="button" class="button"
    	onclick="location.href='<c:url value="/mainMenu.html"/>'"
        value="<fmt:message key="button.done"/>"/>
</c:set>


<ul>
	<li>
	<label class="desc"><fmt:message key="common.filtros.busqueda"/></label>
	<div class="group" style="width: 300px">
		<div>
	     	<fmt:message key="common.cliente.persona"/><br/>
			<input id="deCliente" class="text mediumlarge" name="deCliente" maxlength="100"/>
	    </div><br/>
	     
	    <div>
	     	<fmt:message key="common.codigo.tarjeta"/><br/>
			<input id="codeTarjeta" class="text medium" name="codeTarjeta" maxlength="12"/>
	    </div><br/>
	     
	     
	    <div>
	     	<fmt:message key="penalizacionbonificacionList.fechainiciodoc"/><br/>
			<input id="inicioDocumentoId" class="text medium" name="inicioDocumento" maxlength="12" size="11" />
			<input type="button" class="buttoncal" id="inicioDocumentoCal" value="..."/>  [<fmt:message key="date.format"/>]
			<script type="text/javascript">
	          new Calendar({
	                  inputField: "inicioDocumentoId",		
	                  dateFormat: "%d/%m/%Y",
	                  trigger	: "inicioDocumentoCal",	
	                  bottomBar	: false,
	                  onSelect	: function() {
                  		  this.hide();
	                  }
	          });
	        </script>
	    </div><br/>
	    
	    <div>
	     	<fmt:message key="penalizacionbonificacionList.fechafindoc"/><br/>
			<input id="finDocumentoId" class="text medium" name="finDocumento" maxlength="12" size="11" />
			<input type="button" class="buttoncal" id="finDocumentoCal" value="..."/>  [<fmt:message key="date.format"/>]
			<script type="text/javascript">
	          new Calendar({
	                  inputField: "finDocumentoId",		
	                  dateFormat: "%d/%m/%Y",
	                  trigger	: "finDocumentoCal",	
	                  bottomBar	: false,
	                  onSelect	: function() {
	        	  			this.hide();
	                  }
	          });
	        </script> 
	    </div><br/>
	    
	    
		<div>
			<fmt:message key="penalizacionbonificacionList.tipo"/><br/>
	        <select class="text mediumlarge" id="coTipo" >
	        	<option value="-1">
	        		<fmt:message key="label.itemdefault"/>
	        	</option>
				<option value="1"><fmt:message key="penalizacionbonificacionform.tipo.penalizacion"/></option>
				<option value="2"><fmt:message key="penalizacionbonificacionform.tipo.bonificacion"/></option>


	       	</select>
		</div><br/>
			    
		<div>
			<fmt:message key="penalizacionbonificacionList.tipoincidencia"/><br/>
	        <select class="text mediumlarge" id="coTipoIncidencia" >
	        	<option value="-1">
	        		<fmt:message key="label.itemdefault"/>
	        	</option>
	        	<c:forEach var="bntipo" items="${tipoIncidencias}">
	        		<option value="${bntipo.id}">
	        			${bntipo.deTipoIncidenciaPuntos}
	        		</option>
	        	</c:forEach>
	       	</select>
		</div><br/>
	    	    	     
	    <div> 					
			<input type="button" onclick="buscarIncidencias()" 
			value="<fmt:message key="button.search"/>"/>			
	 	</div>
	</div>	
	</li>
</ul>

<c:out value="${buttons}" escapeXml="false" /><br/><br/>
<table id="incidencias" cellpadding="0" class="table" cellspacing="0" style="width: 1100px" > 
	<thead> 
		<tr> 
            <th scope="col"><fmt:message key="canjeList.cliente"/></th>
            <th scope="col"><fmt:message key="canjeList.tarjeta"/></th>
            <th scope="col"><fmt:message key="canjeList.fechadoc"/></th>
            <th scope="col"><fmt:message key="penalizacionbonificacionList.tipo"/></th> 
            <th scope="col"><fmt:message key="penalizacionbonificacionList.tipoincidencia"/></th> 
            <th scope="col"><fmt:message key="penalizacionbonificacionList.puntos"/></th> 
		</tr>
	</thead> 
	<tbody id="incidenciasbody">
		<tr id="pattern" style="display:none;">
			<td><span id="tableCliente"></span></td>
			<td><span id="tableTarjeta" ></span></td>
			<td><span id="tableFechaDoc" ></span></td>
			<td><span id="tableTipo" ></span></td>
			<td><span id="tableTipoIncidencia" ></span></td>
			<td><span id="tablePuntos"></span></td>
		</tr> 	
		<c:forEach var="bnincidencia" items="${incidencias}" varStatus="status">	
			<c:choose>
				  <c:when test="${status.index % 2 == 0}"><tr class="odd" ></c:when>
				  <c:otherwise><tr class="even" ></c:otherwise>
			</c:choose>
            	<td>
					<a href="<c:url value="/penalizacionbonificacion/penalizacionbonificacionform.html?id=${bnincidencia.id}&amp;from=list"/>">					
						${bnincidencia.deClientePersona}
					</a>            	
				</td>
                <td>${bnincidencia.coTarjetaPersona}</td>
                <td>${bnincidencia.daFechaIncidencia}</td>
                <td>
 					<c:choose>
	        			<c:when test="${bnincidencia.coTipo== 1}">
	        				<fmt:message key="penalizacionbonificacionform.tipo.penalizacion"/>
 						</c:when>
	        			<c:when test="${bnincidencia.coTipo== 2}">
	        				<fmt:message key="penalizacionbonificacionform.tipo.bonificacion"/>
 						</c:when> 						
			        	<c:otherwise>
		        		</c:otherwise> 						
 					</c:choose>		                
	        	</td>                  
                <td>${bnincidencia.daTipoIncidenciaPuntos}</td>
                <td>${bnincidencia.vaPuntos}</td>
           </tr>
        </c:forEach>				
	</tbody>
</table> 

<c:out value="${buttons}" escapeXml="false" />
</form:form>
<script type="text/javascript">


    function buscarIncidencias()
    {
        var codeTarjeta  = dwr.util.getValue("codeTarjeta");
        var deCliente 	 = dwr.util.getValue("deCliente");
        var daInicioDoc  = dwr.util.getValue("inicioDocumentoId");
        var daFinDoc 	 = dwr.util.getValue("finDocumentoId");
        var coTipoIncidencia	 = dwr.util.getValue("coTipoIncidencia");
        var coTipo	 = dwr.util.getValue("coTipo");
    	var dateFormat = dwr.util.getValue("date_format");
    	
        IncidenciaPuntosService.busquedaIncidencia(deCliente,codeTarjeta,daInicioDoc,
        daFinDoc,coTipoIncidencia,coTipo,
        	function(data) {

    	    dwr.util.removeAllRows("incidenciasbody", { filter:function(tr) {
    	      return (tr.id != "pattern");
    	    }});

    	    var contador  = 0;
    	    var bncanje,url;
    	    for (var i = 0; i < data.length; i++) {

    	    	bnincidencia  = data[i];
    	    	contador = contador + 1;

    	      	dwr.util.cloneNode("pattern", { idSuffix:contador });
    	      	url = "<a href='/clubpgnweb/penalizacionbonificacion/penalizacionbonificacionform.html?id=" +bnincidencia.id + "'>" + bnincidencia.deClientePersona + "</a>";

    	      	
    	      	dwr.util.setValue("tableCliente" + contador, url, { escapeHtml:false });

    	      	dwr.util.setValue("tableTarjeta"  + contador,  bnincidencia.coTarjetaPersona, { escapeHtml:false });
    	      	
    	      	dwr.util.setValue("tableFechaDoc"  + contador,   
    	      			bnincidencia.daFechaIncidencia
    	    	      	, { escapeHtml:false });

    	      	if (bnincidencia.coTipo == 1){
    	      		dwr.util.setValue("tableTipo"  + contador, '<fmt:message key="penalizacionbonificacionform.tipo.penalizacion"/>' , { escapeHtml:false });
            	    } else if (bnincidencia.coTipo == 2){
            	    	dwr.util.setValue("tableTipo"  + contador, '<fmt:message key="penalizacionbonificacionform.tipo.bonificacion"/>' , { escapeHtml:false });
                	    }
    	      	

    	      	
    	      	dwr.util.setValue("tableTipoIncidencia"  + contador,  bnincidencia.daTipoIncidenciaPuntos, { escapeHtml:false });

    	      	dwr.util.setValue("tablePuntos" + contador,  bnincidencia.vaPuntos, { escapeHtml:false });


				if(i % 2 == 0){
					$("pattern" + contador).className = "odd";
				}
				else{
					$("pattern" + contador).className = "even";
				}
	    	      
	    	    $("pattern" + contador).style.display = "";
    	    }
		});
    }


</script>
<script type='text/javascript' src="<c:url value="/dwr/interface/IncidenciaPuntosService.js"/>"></script>